<template>
    <div id="list">
        <van-nav-bar title="账单" left-arrow @click-left="onClickLeft" fixed/>
        <van-empty description="您还没有账单哦" v-if="!list.length">
        </van-empty>
        <div class="list-box">
            <div v-for="item in list" :key="item.car_id" class="box">
                <div class="flex-sp-center">
                    <div class="ellipsis adrss">
                        <div class="top">{{item.parking_lot_name}} - {{item.areaName}}</div>
                        <div class="time">{{gettime(item.createTime)}}</div>
                    </div>
                    <div style="text-align:center">
                        <div :style="item.status === 2 ? 'color:red' : 'color:green'">{{item.status === 2 ?'取消预约' : '预约成功'}}</div>
                        <div v-if="item.status === 2" style="margin-top:10px">-{{item.cancleMoney}}</div>
                        <div v-else style="margin-top:10px">-{{item.appoint_price}}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="list-content">
        <van-panel
            :title="item.inTime.slice(0,10)"
            :status="(item.status==0)?'未支付':'已支付'"
            v-for="(item,index) in list"
            :key="index"
        >
            <div slot="footer">
            <div class="list-item">
                <span>入场时间：{{item.inTime}}</span>
                <span>出场时间：{{item.outTime}}</span>
                <span>消费金额：{{item.payment}}</span>
            </div>
            <div class="list-button">
                <van-button
                size="small"
                v-show="item.status==0"
                @click="pay(item.serialNumber,item.payment)"
                >完成支付</van-button>
                <van-button size="small" v-show="item.status==1" type="danger">删除订单</van-button>
            </div>
            </div>
        </van-panel>
        </div> -->
    </div>
</template>

<script>
import { NavBar, Panel, Button, Toast } from "vant";
export default {
    components: {
        [NavBar.name]: NavBar,
        [Panel.name]: Panel,
        [Button.name]: Button,
        [Toast.name]: Toast
    },
    data() {
        return {
            url: this.$store.state.url,
            url1: this.$store.state.url1,
            userid: this.$store.state.userid,
            list: []
        };
    },
    beforeCreate() {
        this.$store.dispatch("reflashSet");
    },
    mounted() { 
        this.getList()
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        pay(id, money) {   

        },
        async getList() { 
            try{ 
                const { data : res } = await this.$api.Order.getUserOrder({ 
                    userId: localStorage.userid
                })
                if(res.code) return Toast(res.msg)
                this.list = res.result
            }catch(e) { 
                console.log(e);
            }
        },
        gettime(t) {
            var _time = new Date(t);
            var year = _time.getFullYear();
            var month = _time.getMonth() + 1;
            var date = _time.getDate();
            var hour = _time.getHours();
            var minute = _time.getMinutes();
            var second = _time.getSeconds();
            return (
                year +
                "-" +
                month +
                "-" +
                date +
                " " +
                hour +
                ":" +
                minute +
                ":" +
                second
            ); //这里自己按自己需要的格式拼接
        }
    }
};
</script>

<style lang="scss" scoped>
$blue: #2d8cf0;
#list {
  font-size: 0.24rem;
}
.list-content {
  margin-top: 0.84rem;
}
.van-panel {
  margin-bottom: 0.2rem;
}
.list-item {
  display: flex;
  flex-direction: column;
  height: 1.2rem;
  border-bottom: 0.01rem solid #ebedf0;
  span {
    margin-bottom: 0.05rem;
  }
}
.list-button {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.2rem;
  .van-button:last-child {
    margin-left: 0.2rem;
  }
}
.list-box{ 
    padding: 20px;
    margin-top: 30px;
    .box{
        border: 1px solid #eee;
        background: #fff;
        border-radius: 16px;
        margin-top: 15px;
        display: flex;
        font-size: 16px;
        padding: 20px;
        align-items: center;
        .number{ 
            color: #2d8cf0;
        }
        .yellow{ 
            color: rgb(223, 223, 135);
        }
        .red{ 
            color: rgb(226, 87, 87);
        }
        .green{ 
            color: green;
        }
        .top{
            font-size: 16px;
            font-weight: 600;
        }
        .time{ 
            font-size: 14px;
            margin-top: 10px;
        }
    }
}
// .ellipsis {
//     width: 100px;
//     overflow: hidden; 
//     white-space: nowrap; 
//     text-overflow: ellipsis;
// }
.box{ 
    font-size: 14px;
}
.flex-sp-center{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

}
</style>
